<template>
  <div class="app-main" style="margin: 0 !important">
    <div class="upload-video-container">
      <div class="main-container" style="margin: 0 auto">
        <div class="video-info">
          <div class="title">上传视频</div>
          <div style="padding: 30px 50px">
            <el-upload
              class="upload-demo"
              name="file"
              accept=".mp4,.mov,.avi,.mpeg,.3gp,.mp3"
              :multiple="true"
              action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
              drag
              ::on-change="handleChange"
              :before-upload="beforeAvatarUpload"
              :show-file-list="false"
              :http-request="e => uploadFiles(e)"
            >
              <el-icon class="el-icon--upload">
                <upload-filled />
              </el-icon>
              <div class="el-upload__text">
                将上传文件拖到此处 <em style="color: #8b3dff">或点击上传</em>
              </div>
            </el-upload>
            <el-tabs v-model="form.fileStatus" class="tabs_title">
              <el-tab-pane
                :label="'等待中（' + form.wait_number + '）'"
                name="upload_waiting"
              >
                <div v-if="form.videos.length > 0" style="margin-top: 5px">
                  <template v-for="(item, index) in form.videos" :key="index">
                    <div
                      class="plFileListView"
                      v-if="item.uploading && !item.uploadErr"
                      :key="item.file.uid"
                    >
                      <div>{{ item.file.name || item.name }}</div>
                      <div
                        style="width: 300px; white-space: nowrap"
                        v-if="item.percentage < 100"
                      >
                        <el-progress :percentage="item.percentage" />
                      </div>
                      <div
                        class="plFileItemRemoveIcon"
                        @click="handlePlFileRemove(item, 'await')"
                      >
                        <el-icon>
                          <Close />
                        </el-icon>
                      </div>
                    </div>
                  </template>
                </div>
                <el-empty
                  v-if="!form.wait_number"
                  description="暂无数据"
                  :image-size="50"
                />
              </el-tab-pane>
              <el-tab-pane
                :label="'上传成功（' + form.success_number + '）'"
                name="upload_success"
              >
                <div v-if="form.videos.length > 0" style="margin-top: 5px">
                  <template v-for="(item, index) in form.videos" :key="index">
                    <div
                      class="plFileListView"
                      v-if="!item.uploading && !item.uploadErr"
                      :key="item.file.uid"
                    >
                      <div>{{ item.file.name || item.name }}</div>
                      <div
                        class="plFileItemRemoveIcon"
                        @click="handlePlFileRemove(item, 'success')"
                      >
                        <el-icon>
                          <Close />
                        </el-icon>
                      </div>
                    </div>
                  </template>
                </div>
                <el-empty
                  v-if="!form.success_number"
                  description="暂无数据"
                  :image-size="50"
                />
              </el-tab-pane>
              <el-tab-pane
                :label="'上传失败（' + form.error_number + '）'"
                name="upload_fail"
              >
                <div v-if="form.videos.length > 0" style="margin-top: 5px">
                  <template v-for="(item, index) in form.videos" :key="index">
                    <div
                      class="plFileListView"
                      v-if="item.uploadErr"
                      :key="item.file.uid"
                    >
                      <div>{{ item.file.name || item.name }}</div>
                      <div
                        class="plFileItemRemoveIcon"
                        @click="handlePlFileRemove(item, 'error')"
                      >
                        <el-icon>
                          <Close />
                        </el-icon>
                      </div>
                    </div>
                  </template>
                </div>
                <el-empty
                  v-if="!form.error_number"
                  description="暂无数据"
                  :image-size="50"
                />
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <el-form :model="form" label-width="120px">
          <div class="video-info">
            <div class="title">视频信息</div>
            <div class="form" style="padding: 34px 195px 30px 0">
              <el-form-item label="视频分区" required>
                <el-radio-group
                  class="radio_group"
                  v-model="form.type"
                  @change="handleType"
                >
                  <el-radio label="1">成片</el-radio>
                  <el-radio label="2">素材</el-radio>
                  <el-radio label="3">第三方</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="视频分类" required>
                <span style="margin-right: 33px">一级分类></span>
                <el-radio-group class="radio_group" v-model="form.one_class_id">
                  <el-radio
                    v-for="(item, index) in form.primaryClassificationList"
                    :key="index"
                    :label="item.id"
                    @change="handleRadioOne"
                    >{{ item.name }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-if="form.one_class_id != ''">
                <span style="margin-right: 33px">二级分类></span>
                <el-radio-group class="radio_group" v-model="form.two_class_id">
                  <el-radio
                    v-for="(item, index) in form.secondaryClassificationList"
                    :key="index"
                    :label="item.id"
                    @change="handleRadioTwo"
                    >{{ item.name }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="视频名称" required>
                <el-radio-group
                  class="radio_group"
                  v-model="form.videoName"
                  size="large"
                >
                  <el-radio-button label="1">使用文件名称</el-radio-button>
                  <el-radio-button label="2">自定义</el-radio-button>
                  <el-radio-button label="3">前缀+文件名称</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-if="form.videoName == 2">
                <el-input
                  size="large"
                  v-model="form.title"
                  placeholder="请输入视频名称"
                />
              </el-form-item>
              <el-form-item v-if="form.videoName == 3">
                <el-input
                  size="large"
                  v-model="form.title"
                  placeholder="请输入前缀"
                />
              </el-form-item>
              <el-form-item label="拍摄时间">
                <el-date-picker
                  size="large"
                  v-model="form.shoot_time"
                  type="date"
                  placeholder="请选择拍摄日期"
                />
              </el-form-item>
              <el-form-item label="关联任务">
                <el-select
                  v-model="form.task_id"
                  placeholder="请选择关联任务"
                  size="large"
                >
                  <el-option
                    v-for="item in relevanceTaskList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="视频说明">
                <el-input
                  v-model="form.illustrate"
                  type="textarea"
                  placeholder="请输入视频说明"
                />
              </el-form-item>
              <el-form-item label="公共标签" required>
                <div style="display: flex; height: 600px">
                  <div class="checkbox-container">
                    <div class="name">标签组</div>
                    <div class="content">
                      <div v-if="form.data.length == 0">暂无数据</div>
                      <div
                        :class="
                          form.selectIndex == index
                            ? 'pointer is-active'
                            : 'pointer'
                        "
                        v-for="(item, index) in form.data"
                        :key="index"
                        @click="
                          handleCheckBox(
                            item.option_info_json,
                            item.name,
                            index
                          )
                        "
                      >
                        {{ item.name }}
                      </div>
                    </div>
                  </div>
                  <div class="checkbox-container">
                    <div class="name">子标签</div>
                    <div class="content">
                      <div v-if="form.childrens.length == 0">暂无数据</div>
                      <div v-for="(item, index) in form.childrens" :key="index">
                        <el-checkbox
                          v-model="item.isShow"
                          class="myRedCheckBox"
                          @change="handleChildrenCheckbox(item)"
                        >
                          {{ item.name }}
                        </el-checkbox>
                      </div>
                    </div>
                  </div>
                  <div class="checkbox-container">
                    <div class="name">已添加标签</div>
                    <div class="content">
                      <div v-if="form.selected.length == 0">暂未添加标签</div>
                      <div
                        style="
                          display: flex;
                          align-items: center;
                          justify-content: space-between;
                        "
                        v-for="(item, index) in form.selected"
                        :key="index"
                      >
                        <div>{{ item.name }}</div>
                        <el-icon
                          style="margin-right: 10px"
                          @click="handleSelecteDelete(item)"
                        >
                          <Close />
                        </el-icon>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </div>
          </div>
          <div class="video-info">
            <div class="title">更多设置</div>
            <div class="form" style="padding: 34px 195px 30px 0">
              <el-form-item label="抖音数据">
                <el-form-item label="点赞" label-width="70px">
                  <el-input
                    size="large"
                    v-model="form.like"
                    style="width: 143px"
                    placeholder="请输入数据"
                  />
                </el-form-item>
                <el-form-item label="评论" label-width="70px">
                  <el-input
                    size="large"
                    v-model="form.comment"
                    style="width: 143px"
                    placeholder="请输入数据"
                  />
                </el-form-item>
                <el-form-item label="收藏" label-width="70px">
                  <el-input
                    size="large"
                    v-model="form.collect"
                    style="width: 143px"
                    placeholder="请输入数据"
                  />
                </el-form-item>
                <el-form-item label="转发" label-width="70px">
                  <el-input
                    size="large"
                    v-model="form.forward"
                    style="width: 143px"
                    placeholder="请输入数据"
                  />
                </el-form-item>
              </el-form-item>
              <el-form-item label="谁可以看" required>
                <el-radio-group class="radio_group" v-model="form.authority">
                  <el-radio label="1">公开</el-radio>
                  <el-radio label="2">团队成员</el-radio>
                  <el-radio label="3">小组成员</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </div>
          <el-form-item label-width="0">
            <el-button
              type="primary"
              style="width: 192px; height: 40px; margin: 20px 0"
              @click="onSubmit"
              >发布</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script lang="ts"></script>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import { UploadFilled, Close } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { UploadProps } from "element-plus";
import SparkMD5 from "spark-md5";
import COS from "cos-js-sdk-v5";
import moment from "moment";
import {
  getClassificationListApi,
  getClientVideoSaveApi,
  getClientOptionListApi
} from "@/api/upload";

const cos = new COS({
  SecretId: "AKIDhK6oW96L8mJbKvreiZCpXIw6h973lBKH",
  SecretKey: "rWzJROAlA5mNsBJH2auyxqYi2EAvYYMw",
  Protocol: "https:"
});
const form = reactive({
  type: "1",
  one_class_id: "",
  primaryClassificationList: [],
  two_class_id: "",
  secondaryClassificationList: [],
  videoName: "1",
  title: "",
  shoot_time: "",
  task_id: "",
  relevanceTaskList: [],
  illustrate: "",
  authority: "1",
  videos: [],
  uploadingFilesNumber: 0,
  waitUploadFiles: [],
  fileStatus: "upload_waiting",
  number_sum: 0,
  wait_number: 0,
  success_number: 0,
  error_number: 0,
  data: [],
  childrens: [],
  selectIndex: 0,
  selected: [],
  like: "",
  comment: "",
  collect: "",
  forward: ""
});
const onSubmit = async () => {
  if (form.videos.length == 0) {
    return ElMessage.warning("请上传视频");
  }
  if (form.one_class_id.length == 0) {
    return ElMessage.warning("请选择一级分类");
  }
  if (form.two_class_id.length == 0) {
    return ElMessage.warning("请选择二级分类");
  }
  if (form.videoName == 2 && form.title == "") {
    return ElMessage.warning("请输入视频名称");
  }
  if (form.selected.length == 0) {
    return ElMessage.warning("请选择公共标签子标签");
  }
  const data = [];
  for (let i = 0; i < form.videos.length; i++) {
    console.log(form.videos[i]);
    data.push({
      id: 0,
      url: form.videos[i].url,
      type: form.type,
      one_class_id: form.one_class_id,
      two_class_id: form.two_class_id,
      shoot_time: moment(form.shoot_time).format("YYYY-MM-DD"),
      illustrate: form.illustrate,
      option_info_json: form.selected,
      video_time: form.videos[i].file.size,
      authority: Number(form.authority),
      like: Number(form.like),
      comment: Number(form.comment),
      collect: Number(form.collect),
      forward: Number(form.forward),
      task_id: Number(form.task_id),
      title:
        form.videoName == 2
          ? form.title + "_" + [i]
          : form.videoName == 3
          ? form.title + "_" + form.videos[i].name
          : form.videos[i].name
    });
  }
  console.log(data);
  for (let i = 0; i < data.length; i++) {
    const result = await getClientVideoSaveApi(data[i]);
  }
};
const handleRadioOne = t => {
  console.log(t);
  form.primaryClassificationList.map((value, index) => {
    if (value.id == t) {
      form.secondaryClassificationList = value.children;
    }
  });
  // form.secondaryClassificationList = [
  //   {name: "成片1", val: 0,},
  //   {name: "素材2", val: 1,},
  //   {name: "第三方3", val: 2,},
  //   {name: "图片4", val: 3,},
  //   {name: "文案5", val: 4,}
  // ]
};
const handleType = async () => {
  /* form.primaryClassificationList=[
       {
         "id":1,
         "level":1,
         "name":"测试一级",
         "type":1,
         "p_id":0,
         "sort":0,
         "children": [
           {
             "id":3,
             "level":2,
             "name":"测试二级-1",
             "type":1,
             "p_id":1,
             "sort":0
           },
           {
             "id":4,
             "level":2,
             "name":"测试二级-2",
             "type":1,
             "p_id":1,
             "sort":0
           }
         ]
       },
       {
         "id":5,
         "level":1,
         "name":"测试一级-1",
         "type":1,
         "p_id":0,
         "sort":0,
         "children": [
           {
             "id":6,
             "level":2,
             "name":"测试二级-5",
             "type":1,
             "p_id":5,
             "sort":0
           },
           {
             "id":7,
             "level":2,
             "name":"测试二级-6",
             "type":1,
             "p_id":5,
             "sort":0
           },
           {
             "id":8,
             "level":2,
             "name":"测试二级-7",
             "type":1,
             "p_id":5,
             "sort":0
           }
         ]
       }
     ]*/
  const result = await getClassificationListApi({
    type: form.type
  });
  console.log(result.data);
  form.primaryClassificationList = result.data;
};
handleType();
const handleRadioTwo = async t => {
  const result = await getClientOptionListApi({ id: t });
  form.data = result.data;
  /* form.data = [
       {
         "id":2,
         "create_time":1695283748,
         "update_time":1695283748,
         "name":"测试标签组2",
         "option_info_json":"[{\"name\":\"标签一\"}]",
         "class_json":"[{\"id\":1},{\"id\":3}]"
       },
       {
         "id":3,
         "create_time":1695283994,
         "update_time":1695283994,
         "name":"测试标签组3",
         "option_info_json":"[{\"name\":\"标签十\"}]",
         "class_json":"[{\"id\":1},{\"id\":3}]"
       },
       {
         "id":4,
         "create_time":1695284022,
         "update_time":1695284022,
         "name":"测试标签组4",
         "option_info_json":"",
         "class_json":"[{\"id\":1},{\"id\":3}]"
       },
       {
         "id":5,
         "create_time":1695284839,
         "update_time":1695284839,
         "name":"测试标签组-编辑",
         "option_info_json":"",
         "class_json":"[{\"id\":1},{\"id\":3}]"
       },
       {
         "id":7,
         "create_time":1695386003,
         "update_time":1695386003,
         "name":"测试标签组5",
         "option_info_json":"",
         "class_json":"[{\"id\":3}]"
       }
       /!*{
         childrens: [
           {
             id: 14237,
             isSys: 0,
             level: 2,
             name: "横屏",
             referId: 14181,
             requiredMaterial: 0,
             requiredPic: 0,
             requiredThird: 0,
             requiredVideo: 0
           },
           {
             id: 14238,
             isSys: 0,
             level: 2,
             name: "竖屏",
             referId: 14181,
             requiredMaterial: 0,
             requiredPic: 0,
             requiredThird: 0,
             requiredVideo: 0
           },
         ],
         id: 14181,
         isSys: 0,
         level: 1,
         name: "横屏/竖屏",
         referId: 0,
         required: 0,
         requiredMaterial: 1,
         requiredPic: 1,
         requiredThird: 1,
         requiredVideo: 1,
         weight: 0,
       },
       {
         childrens: [
           {
             id: 14250,
             isSys: 0,
             level: 2,
             name: "剧情（微创新）",
             referId: 14188,
             requiredMaterial: 0,
             requiredPic: 0,
             requiredThird: 0,
             requiredVideo: 0
           },
           {
             id: 14251,
             isSys: 0,
             level: 2,
             name: "剧情（1:1）",
             referId: 14188,
             requiredMaterial: 0,
             requiredPic: 0,
             requiredThird: 0,
             requiredVideo: 0
           },
           {
             id: 14252,
             isSys: 0,
             level: 2,
             name: "实拍卡点",
             referId: 14188,
             requiredMaterial: 0,
             requiredPic: 0,
             requiredThird: 0,
             requiredVideo: 0
           },
           {
             id: 14253,
             isSys: 0,
             level: 2,
             name: "纯混剪",
             referId: 14188,
             requiredMaterial: 0,
             requiredPic: 0,
             requiredThird: 0,
             requiredVideo: 0
           },
           {
             id: 14254,
             isSys: 0,
             level: 2,
             name: "VLOG",
             referId: 14188,
             requiredMaterial: 0,
             requiredPic: 0,
             requiredThird: 0,
             requiredVideo: 0
           },
           {
             id: 14255,
             isSys: 0,
             level: 2,
             name: "沉浸式",
             referId: 14188,
             requiredMaterial: 0,
             requiredPic: 0,
             requiredThird: 0,
             requiredVideo: 0
           },
           {
             id: 14256,
             isSys: 0,
             level: 2,
             name: "测评",
             referId: 14188,
             requiredMaterial: 0,
             requiredPic: 0,
             requiredThird: 0,
             requiredVideo: 0
           },
           {
             id: 14257,
             isSys: 0,
             level: 2,
             name: "混剪裂变",
             referId: 14188,
             requiredMaterial: 0,
             requiredPic: 0,
             requiredThird: 0,
             requiredVideo: 0
           },
           {
             id: 14258,
             isSys: 0,
             level: 2,
             name: "超长口播",
             referId: 14188,
             requiredMaterial: 0,
             requiredPic: 0,
             requiredThird: 0,
             requiredVideo: 0
           },
           {
             id: 14259,
             isSys: 0,
             level: 2,
             name: "口播",
             referId: 14188,
             requiredMaterial: 0,
             requiredPic: 0,
             requiredThird: 0,
             requiredVideo: 0
           },
           {
             id: 14260,
             isSys: 0,
             level: 2,
             name: "其他",
             referId: 14188,
             requiredMaterial: 0,
             requiredPic: 0,
             requiredThird: 0,
             requiredVideo: 0
           },
           {
             id: 14261,
             isSys: 0,
             level: 2,
             name: "长剧情",
             referId: 14188,
             requiredMaterial: 0,
             requiredPic: 0,
             requiredThird: 0,
             requiredVideo: 0
           },
           {
             id: 14262,
             isSys: 0,
             level: 2,
             name: "新闻类型",
             referId: 14188,
             requiredMaterial: 0,
             requiredPic: 0,
             requiredThird: 0,
             requiredVideo: 0
           },
           {
             id: 14263,
             isSys: 0,
             level: 2,
             name: "网络素材",
             referId: 14188,
             requiredMaterial: 0,
             requiredPic: 0,
             requiredThird: 0,
             requiredVideo: 0
           },
         ],
         id: 14188,
         isSys: 0,
         level: 1,
         name: "脚本类型",
         referId: 0,
         required: 0,
         requiredMaterial: 1,
         requiredPic: 1,
         requiredThird: 1,
         requiredVideo: 1,
         weight: 0
       }*!/
     ]*/
  form.data.map((value, index) => {
    if (value.option_info_json != "") {
      const option_info_json = JSON.parse(value.option_info_json);
      option_info_json.map((values, indexs) => {
        return (values.isShow = false);
      });
      value.option_info_json = option_info_json;
      console.log(option_info_json);
    }
  });
  // console.log(form.data);
  // console.log(form.data[0].option_info_json);
  form.childrens = form.data[0].option_info_json;
  console.log(form.childrens);
  handleCheckBox(form.childrens, form.data[0].name, form.selectIndex);
};
const handleCheckBox = (val, name, index) => {
  if (val.length != 0) {
    form.childrens = val;
    console.log(form.childrens);
    form.childrens.map((value, index) => {
      return (value.group_name = name);
    });
  } else {
    form.childrens = [];
  }
  form.selectIndex = index;
};
const handleChildrenCheckbox = val => {
  console.log(val);
  if (val.isShow === true) {
    form.selected.push(val);
  } else {
    form.selected.splice(
      form.selected.findIndex(item => item.name === val.name),
      1
    );
  }
};
const handleSelecteDelete = val => {
  console.log(val.id);
  form.selected.splice(
    form.selected.findIndex(item => item.name === val.name),
    1
  );
  form.data.map((value, index) => {
    JSON.parse(value.option_info_json).map((values, indexs) => {
      if (val.name == values.name) {
        values.isShow = false;
      }
    });
  });
};
const uploadFiles = params => {
  form.number_sum++;
  if (form.number_sum >= 100) {
    return ElMessage.warning("单次最多上传99个文件");
  }
  if (params.file) {
    console.log("file", params.file);
    const fileObj = {
      uploading: true,
      uploadErr: false,
      percentage: 0,
      file: params.file,
      url: "",
      size: params.file.size,
      uid: params.file.uid,
      name: params.file.name
    };
    form.wait_number++;
    const fileFormat = getFormat(params.file.name);
    const isL200M = params.file.size / 1024 / 1024 < 200;
    // md5操作
    if (isL200M) {
      // 小文件
      const fileReader = new FileReader();
      fileReader.readAsBinaryString(params.file);
      fileReader.onload = e => {
        const md5 = SparkMD5.hashBinary(e.target.result);
        const md5name = md5 + "." + fileFormat;
        console.log("小文件MD5name", md5name);
        form.videos.push(fileObj);
        putFileToCos(params, md5name, false);
      };
    } else {
      // 大文件
      const sliceLength = 10;
      const chunkSize = Math.ceil(params.file.size / sliceLength);
      const fileReader = new FileReader();
      const md5 = new SparkMD5();
      let index = 0;
      const loadFile = () => {
        const slice = params.file.slice(index, index + chunkSize);
        fileReader.readAsBinaryString(slice);
      };
      loadFile();
      fileReader.onload = e => {
        md5.appendBinary(e.target.result);
        if (index < params.file.size) {
          index += chunkSize;
          loadFile();
        } else {
          const md5name = md5.end() + "." + fileFormat;
          console.log("大文件MD5name", md5name);
          form.videos.push(fileObj);
          putFileToCos(params, md5name, false);
        }
      };
    }
  }
};
const putFileToCos = (params, md5name, nojudge) => {
  console.log("params");
  // console.log(md5name);
  // console.log(nojudge);
  // console.log(form.videos[0].file.uid);
  // console.log(params);
  if (!nojudge) {
    form.uploadingFilesNumber++;
    if (form.uploadingFilesNumber >= 5) {
      // 超过5个就不再上传，先添加进waitUploadFiles
      form.waitUploadFiles.push({
        params,
        md5name,
        uploading: false
      });
      return;
    }
  }

  const index = form.videos.findIndex(
    item => item.file.uid === params.file.uid
  );
  cos.putObject(
    {
      Bucket: "bdw-sh-1259268558",
      Region: "ap-shanghai",
      Key: md5name,
      StorageClass: "STANDARD",
      Body: params.file,
      onProgress: function (progressData) {
        if (index > -1) {
          form.videos[index] = {
            ...form.videos[index],
            percentage: Math.round(progressData.percent * 100),
            uploading: true
          };
          console.log(form.videos);
        }
        console.log(md5name + "文件上传进度：", JSON.stringify(progressData));
      }
    },
    (err, data) => {
      console.log(err || data);
      if (form.uploadingFilesNumber > 5) {
        batchUploadFileBesides100();
      }
      if (err) {
        if (index > -1) {
          form.error_number++;
          form.videos[index] = {
            ...form.videos[index],
            md5name,
            uploadErr: true,
            uploading: false
          };
          console.log(form.videos);
        }
        return;
      }
      if (data && data.statusCode === 200) {
        form.success_number++;
        form.wait_number--;
        const url = `https:${data.Location}`;
        if (index > -1) {
          form.videos[index] = {
            ...form.videos[index],
            url,
            md5name,
            uploading: false
          };
        }
        console.log(form.videos);
        // console.log('url', url);
      }
    }
  );
};
const batchUploadFileBesides100 = () => {
  // 超过100后每有一个文件请求完成就进来判断
  const index = form.waitUploadFiles.findIndex(
    item => item.uploading === false
  );
  if (index > -1) {
    putFileToCos(
      form.waitUploadFiles[index].params,
      form.waitUploadFiles[index].md5name,
      true
    );
    form.waitUploadFiles[index] = {
      ...form.waitUploadFiles[index],
      uploading: true
    };
    console.log({ ...form.waitUploadFiles[index], uploading: true });
  } else {
    //文件全部上传完毕
    console.log("全部上传完毕,清空");
    form.uploadingFilesNumber = 0;
    form.waitUploadFiles = [];
  }
};
const handlePlFileRemove = (item, type) => {
  console.log(1);
  form.videos = form.videos.filter(value => value.file.uid != item.file.uid);
  if (type == "await") {
    form.wait_number--;
  } else if (type == "success") {
    form.success_number--;
  } else {
    form.error_number--;
  }
};
const getFormat = name => {
  const list = name.split(".");
  return list[list.length - 1];
};
const handleChange = (uploadFile, uploadFiles) => {
  console.log(uploadFile);
  console.log(uploadFiles);
};
const beforeAvatarUpload = (rawFile: UploadRawFile) => {
  console.log(form.number_sum++);
  const isType = [
    "video/mp4",
    "video/mov",
    "video/avi",
    "video/mpeg",
    "video/3gp",
    "audio/mpeg"
  ].indexOf(rawFile.type);
  if (isType < 0) {
    ElMessage.error("不支持的文件格式");
    return false;
  }
  return true;
};
</script>
<style lang="scss" scoped>
.app-main {
  width: 100%;
  min-height: calc(100vh - 64px);
}

.upload-video-container {
  padding-bottom: 120px;
  background: #f3f4f7;
}

.main-container {
  width: 1200px;
  height: 100%;
  padding-top: 20px;
  margin: 0 auto;
}

.video-info {
  width: 100%;
  margin-top: 14px;
  background: #fff;
}

.title {
  height: 51px;
  padding-left: 36px;
  font-size: 14px;
  line-height: 51px;
  color: #282828;
  border-bottom: 1px solid #eee;
}

.checkbox-container {
  width: 234px;
  margin-top: 15px;
  margin-right: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.name {
  height: 40px;
  padding-left: 15px;
  background: #f2f2f2;
}

.content {
  height: calc(100% - 40px);
  padding-left: 15px;
  overflow: auto;
}

.plFileItemRemoveIcon {
  display: none;
}

.plFileListView {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
  border-radius: 4px;
}

.plFileListView:hover {
  background-color: #f5f7fa;
}

.plFileListView:hover .plFileItemRemoveIcon {
  display: block;
  cursor: pointer;
  visibility: visible;
  border-radius: 4px;
}

.pointer {
  cursor: pointer;
}

.is-active {
  color: #8b3dff;
}

.radio_group {
  :deep {
    .el-radio__input.is-checked + .el-radio__label {
      color: #8b3dff;
    }

    .el-radio__input.is-checked .el-radio__inner {
      background: #8b3dff;
      border-color: #8b3dff;
    }

    .el-radio-button__original-radio:checked + .el-radio-button__inner {
      background-color: #8b3dff;
      border-color: #8b3dff;
    }

    .el-radio__inner:hover {
      border-color: #8b3dff;
    }

    .el-radio-button__inner:hover {
      color: #8b3dff;
    }

    .el-radio-button__original-radio:checked + .el-radio-button__inner:hover {
      color: #fff;
    }
  }
}

.myRedCheckBox {
  :deep {
    .is-bordered.is-checked {
      border-color: #8b3dff;
    }

    .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #8b3dff;
    }

    .el-checkbox__input.is-checked .el-checkbox__inner,
    .myRedCheckBox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: #8b3dff;
      border-color: #8b3dff;
    }

    .el-checkbox__input.is-focus .el-checkbox__inner {
      border-color: #8b3dff;
    }

    .el-checkbox__inner:hover {
      border-color: #8b3dff;
    }
  }
}

.tabs_title {
  :deep {
    .el-tabs__item:hover {
      color: #8b3dff;
    }

    .el-tabs__item.is-active {
      color: #8b3dff;
    }

    .el-tabs__active-bar {
      background-color: #8b3dff;
    }
  }
}

.upload-demo {
  :deep {
    .el-upload-dragger:hover {
      border: 1px dashed #8b3dff;
    }
  }
}
</style>
